.page-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  background-color: transparent;
  padding:0.75rem 0;
  @include media-breakpoint-up(sm) {
    padding:1.5rem 0;
  }

  &__item{
    display: flex;
    font-size: 1.75rem;
    font-weight: bolder;
    padding-right: 0.7rem;
    @include media-breakpoint-up(sm) {
      font-size: 2.7rem;
    }
    color:white;
    h1{
      color:white;
    }
    // The separator between breadcrumbs (by default, a forward-slash: "/")
    + .page-breadcrumb__item {
      font-size: 1.3rem;
      margin-bottom: 0.5rem;
      font-family: $font-family-subtitle;
      font-weight: lighter;
      text-transform: lowercase;
      @include media-breakpoint-up(sm) {
        &::before {
          display: inline-block; // Suppress underlining of the separator in modern browsers
          padding-right: 0.7rem;
          content: escape-svg($breadcrumb-divider);
        }
      }
    }
  }
}

